<template>
  <div id="information">
    <el-collapse v-model="open2">
      <el-collapse-item title="内容样式" name="2">
        <ul class="content-list">
          <li>
            <span>标题：</span>
            <div>
              <el-input
                style="width:350px"
                size="small"
                type="text"
                placeholder="请输入内容"
                v-model="styles.title"
                maxlength="6"
                show-word-limit
              />
            </div>
          </li>
          <li>
            <span>视频设置 :</span>
            <div>
              <div>
                <upLoadVideo :v="upLoad1" :height="50"></upLoadVideo>
              </div>
            </div>
          </li>
<!--          <li>-->
<!--            <span>视频链接 :</span>-->
<!--            <div>-->
<!--              <el-input-->
<!--                size="small"-->
<!--                type="text"-->
<!--                placeholder="请输入视频播放链接"-->
<!--                v-model="styles.links"-->
<!--                show-word-limit-->
<!--                style="width: 350px"-->
<!--              />-->
<!--            </div>-->
<!--          </li>-->
          <li>
            <span>上间距：</span>
            <div>
              <edgeSetting v-model="styles.marginTop" unit="px" :max="50" :init="Number(styles.marginTop)"></edgeSetting>
            </div>
          </li>
          <li>
            <span>下间距：</span>
            <div>
              <edgeSetting v-model="styles.marginBottom" unit="px" :max="50" :init="Number(styles.marginBottom)"></edgeSetting>
            </div>
          </li>
          <li>
            <span>左右间距：</span>
            <div>
              <edgeSetting v-model="styles.marginLR" unit="px" :max="50" :init="Number(styles.marginLR)"></edgeSetting>
            </div>
          </li>
<!--          <li>-->
<!--            <span>圆角：</span>-->
<!--            <div>-->
<!--              <edgeSetting-->
<!--                v-model="styles.circle"-->
<!--                unit="px"-->
<!--                :max="15"-->
<!--                :init="Number(styles.circle)"-->
<!--              ></edgeSetting>-->
<!--            </div>-->
<!--          </li>-->
        </ul>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import edgeSetting from "../../comm/edgeSetting";
import upLoadVideo from "../../comm/upLoadVideo";
export default {
  name: "information",
  data() {
    return {
      open: "1",
      open2: "2",
    };
  },
  created() {
  },
  components:{
      edgeSetting,
     upLoadVideo,
  },
  computed: {
    ...mapState(["list", "currentId"]),
    styles() {
      return this.list[this.currentId].styles;
    },
    upLoad1() {
      return this.list[this.currentId].styles.upLoad1;
    },
  },
};
</script>
<style lang='less' scoped>
@import url("../../../assets/css/base.less");
/deep/.el-table_1_column_2 {
  text-align: right;
}
/deep/.el-table_1_column_3 {
  text-align: right;
}
/deep/.el-table th,
.el-table tr {
  background-color: #f7f7f7;
}
/deep/.el-button--mini,
.el-button--mini.is-round {
  padding: 7px 10px;
}
.product-operate {
  color: #2d8cf0;
}
.product-intro {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  > p {
    margin-left: 5px;
  }
}
.product-add {
  text-align: center;
  cursor: pointer;
  margin-top: 20px;
  color: #2d8cf0;
}
</style>
